import React from "react";
import { Card, Row, Col, Table, message, Modal, Button } from "antd";
import { ColumnProps } from "antd/es/table";
import { PaginationProps } from "antd/es/pagination/Pagination";
import { TableRowSelection } from "antd/lib/table/interface";
import AJAX, { AJAXResponseConfig, AJAXRequestConfig } from "../../ajax/ajaxServer";
import { formatSex, formatInterest } from "../../utils/tools";
import { getPaginationConfig } from "../../utils/utils";
import { ResponseResult, UserInfo } from "../../utils/interface";
import "./index.less";

interface IProp {}
interface IState {
	dataSource: Array<Object>;
	dataSource2: DataRow[];
	selectedRowKeys1: number[] | string[];
	selectedRowKeys2: number[] | string[];
	selectedItem: Object;
	selectedRows2: DataRow[];
	selectedIds: Array<number>;
	customData: Array<UserInfo>;
	paginationConfig1: PaginationProps;
}

interface DataRow {
	id: number;
	key?: number;
	userName?: string;
	sex?: number;
	interest?: number;
}

const customColumns: ColumnProps<UserInfo>[] = [
	{
		key: "userName",
		title: (
			<div>
				<span className="icon icon-user"></span>
			</div>
		),
		dataIndex: "userName"
	},
	{
		key: "age",
		title: "年龄",
		dataIndex: "age"
	},
	{
		key: "address",
		title: "住址",
		dataIndex: "address"
	}
];

const customData: UserInfo[] = [
	{
		id: 0,
		userName: "胡彦斌",
		age: 32,
		address: "西湖区湖底公园1号"
	},
	{
		id: 1,
		userName: "胡彦斌",
		age: 32,
		address: "西湖区湖底公园1号"
	},
	{
		id: 2,
		userName: "胡彦斌",
		age: 32,
		address: "西湖区湖底公园1号"
	},
	{
		id: 3,
		userName: "胡彦斌",
		age: 32,
		address: "西湖区湖底公园1号"
	},
	{
		id: 4,
		userName: "胡彦斌",
		age: 32,
		address: "西湖区湖底公园1号"
	}
];

class BaseTable extends React.Component<IProp, IState> {
	paramConfig1: any;

	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {
			dataSource: [],
			dataSource2: [],
			selectedRowKeys1: [],
			selectedRowKeys2: [],
			selectedItem: {},
			selectedRows2: [],
			selectedIds: [],
			customData: [],
			paginationConfig1: {}
		};

		this.paramConfig1 = {
			page: 1
		};
	}

	componentDidMount() {
		const dataSource = [
			{
				key: "1",
				name: "胡彦斌",
				age: 32,
				address: "西湖区湖底公园1号"
			},
			{
				key: "2",
				name: "胡彦祖",
				age: 42,
				address: "西湖区湖底公园1号"
			}
		];
		this.setState({
			dataSource
		});

		this.requestLists();

		this.requestStandardDatas();
	}

	requestLists() {
		AJAX.commonAPI({
			url: "/api/table/dataSource2"
		}).then(res => {
			this.setState({
				dataSource2: res
			});
		});
	}

	requestStandardDatas() {
		let config: AJAXRequestConfig = {
			url: "/api/table/standardDatas",
			params: this.paramConfig1
		};
		AJAX.standardDataAPI<UserInfo>(config).then(res => {
			this.setState({
				customData: res.lists,
				paginationConfig1: getPaginationConfig(res, (page: number, pageSize?: number) => {
					this.paramConfig1.page = page;
					this.requestStandardDatas();
				})
			});
		});
	}

	onRowClick = (record: Object, index: number) => {
		// message.info(`${JSON.stringify(record)}-${JSON.stringify(index)}`);
		let selectKey = [index];
		message.info(`${JSON.stringify(selectKey)}`);
		this.setState({
			selectedRowKeys1: selectKey,
			selectedItem: record
		});
	};

	handleDelete = () => {
		let rows = this.state.selectedRows2;
		let ids: number[] = [];
		rows.map(item => ids.push(item.id));
		Modal.confirm({
			title: "删除提示?",
			content: `确定是否删除,这些${JSON.stringify(ids)}`,
			onOk: () => {
				message.success("删除成功");
			}
		});
	};

	render() {
		const columns = [
			{
				title: "姓名",
				dataIndex: "name",
				key: "name"
			},
			{
				title: "年龄",
				dataIndex: "age",
				key: "age"
			},
			{
				title: "住址",
				dataIndex: "address",
				key: "address"
			}
		];
		const columns2 = [
			{
				title: "ID",
				dataIndex: "id",
				key: "id"
			},
			{
				title: "姓名",
				dataIndex: "userName",
				key: "userName"
			},
			{
				title: "性别",
				dataIndex: "sex",
				key: "sex",
				render: formatSex
			},
			{
				title: "年龄",
				dataIndex: "age",
				key: "age"
			},
			{
				title: "兴趣爱好",
				dataIndex: "interest",
				key: "interest",
				render: formatInterest
			}
		];

		const selectionConfig: TableRowSelection<DataRow> = {
			type: "radio",
			// onChange: (selectedRowKeys, selectedRows) => {
			// 	message.info(`${JSON.stringify(selectedRowKeys)}:${JSON.stringify(selectedRows)}`);
			// },
			selectedRowKeys: this.state.selectedRowKeys1
		};

		const multipleSelectionConfig: TableRowSelection<DataRow> = {
			type: "checkbox",
			selectedRowKeys: this.state.selectedRowKeys2,
			onChange: (selectedRowKeys, selectedRows) => {
				let ids: number[] = [];
				selectedRows.map((item: DataRow) => ids.push(item.id));
				message.info(`${JSON.stringify(selectedRowKeys)}`);
				this.setState({
					selectedRowKeys2: selectedRowKeys,
					selectedIds: ids,
					selectedRows2: selectedRows
				});
			}
		};

		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>Base Table</h1>
				</div>

				<Card title="基础表格" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table bordered={true} columns={columns} dataSource={this.state.dataSource} pagination={false}></Table>
						</Col>
					</Row>
				</Card>
				<Card title="动态数据渲染表格" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table bordered={true} columns={columns2} dataSource={this.state.dataSource2} pagination={false}></Table>
						</Col>
					</Row>
				</Card>
				<Card title="单选" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table
								bordered={true}
								rowSelection={selectionConfig}
								onRow={(record, index) => {
									return {
										//点击行
										onClick: () => {
											this.onRowClick(record, index);
										}
										// onMouseEnter: () => { //鼠标移入
										// 	message.info("Mouse Event");
										// }
									};
								}}
								columns={columns2}
								dataSource={this.state.dataSource2}
								pagination={false}
							></Table>
						</Col>
					</Row>
				</Card>
				<Card title="多选" className="button-wrap">
					<Row>
						<Col span={24}>
							<Button type="primary" onClick={this.handleDelete}>
								删除
							</Button>
						</Col>
						<Col span={24}>
							<Table bordered={true} rowSelection={multipleSelectionConfig} columns={columns2} dataSource={this.state.dataSource2} pagination={false}></Table>
						</Col>
					</Row>
				</Card>
				<Card title="TypeScript写法" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table columns={customColumns} dataSource={customData} pagination={false}></Table>
						</Col>
					</Row>
				</Card>
				<Card title="分页Table" className="button-wrap">
					<Row>
						<Col span={24}>
							{/* paginationConfig , pagination需要一个配置参数*/}
							<Table columns={customColumns} dataSource={this.state.customData} pagination={this.state.paginationConfig1}></Table>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default BaseTable;
